<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>todolist-单组件版</title>
    <script src='../node_modules/react/umd/react.development.js'></script>
    <script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    <script src='../node_modules/prop-types/prop-types.js'></script>

    <style>
        .done {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id='root'></div>

    <script type="text/babel">
        class TodoList extends React.Component {

            constructor(props) {
                super(props)
                this.addTodoItem = this.addTodoItem.bind(this)
                this.state = {
                    list: [
                        { name: "抽中华", done: false },
                        { name: "喝剑南春", done: false },
                        { name: "烫杀马特", done: true },
                    ],
                    userInput: "看片"
                }
            }

            onUserInput = (e) => {
                this.setState({
                    userInput: e.target.value
                })
            }

            addTodoItem() {
                /* 将当前的userInput添加为一个todoItem */
                this.setState({
                    list: [
                        { name: this.state.userInput, done: false },
                        ...this.state.list
                    ],
                    // 清空用户输入
                    userInput: ""
                })
            }

            switchTodoItemState(index) {
                this.state.list[index].done = !this.state.list[index].done;
                this.setState({
                    list: [...this.state.list]
                })
            }

            render() {
                return (
                    <div>
                        <h3>TodoList</h3>
                        <div>
                            <div>{this.state.userInput}</div>
                            <input type="text" value={this.state.userInput} onChange={this.onUserInput} />
                            <button onClick={this.addTodoItem}>ADD</button>
                        </div>
                        <div>
                            <ul>{
                                this.state.list.map(
                                    (item, index) => (
                                        <li 
                                        key={index + item.name} 
                                        className={item.done?"done":""}
                                        onClick={
                                            () => {
                                                this.switchTodoItemState(index)
                                            }
                                        }>{item.name}</li>
                                    )
                                )
                            }</ul>
                        </div>
                    </div>
                )
            }
        }

        ReactDOM.render(<TodoList />, document.querySelector("#root"))
    </script>
</body>

</html>